<template>
  <div>
    <el-alert
      style="background-color: #409EFF; color: #222222; font-style: unset; margin-top: 10px; margin-bottom: 20px"
      :closable="false" title="个人请假管理"/>
    <el-form style="margin-left: 5px" size="mini" :inline="true" class="demo-form-inline">
      <el-form-item label="部门" v-if="hasAuth('views.personnel.employeeLeave.leave.employee.select')">
        <el-select v-model="searchForm.departmentId" autocomplete="off">
          <el-option v-for="item in departmentList" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="请假开始时间" v-if="hasAuth('views.personnel.employeeLeave.leave.employee.select')">
        <el-date-picker
          v-model="searchForm.createTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="请假结束时间" v-if="hasAuth('views.personnel.employeeLeave.leave.employee.select')">
        <el-date-picker
          v-model="searchForm.updateTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="请假原因" prop="reason" :label-width="formLabelWidth"
                    v-if="hasAuth('views.personnel.employeeLeave.leave.employee.select')">
        <el-select v-model="searchForm.reason">
          <el-option v-for="item in reasonList" :label="item" :value="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="批核状态" prop="reason" :label-width="formLabelWidth"
                    v-if="hasAuth('views.personnel.employeeLeave.leave.employee.select')">
        <el-select v-model="searchForm.leaderState">
          <el-option label="待审核" value="0"></el-option>
          <el-option label="通过" value="1"></el-option>
          <el-option label="不通过" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" @click="search"
                   v-if="hasAuth('views.personnel.employeeLeave.leave.employee.select')">搜索</el-button>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-refresh-right" @click="resetSearchForm"
                   v-if="hasAuth('views.personnel.employeeLeave.leave.employee.select')">重置</el-button>
      </el-form-item>
      <el-button style="margin-left: 25px" type="primary" @click="createNewLeave('addForm')"><i
        class="el-icon-circle-plus-outline"></i>添加请假流程
      </el-button>
    </el-form>
    <el-divider></el-divider>
    <el-dialog title="请假" :visible.sync="dialogFormVisible">
      <el-form :model="addForm" :rules="rules" ref="addForm">
        <el-form-item label="请假原因" prop="reason" :label-width="formLabelWidth">
          <el-select :disabled="addForm.id" style="width: 200px" v-model="addForm.reason" autocomplete="off">
            <el-option v-for="item in reasonList" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开始时间" prop="beginTime" :label-width="formLabelWidth">
          <el-date-picker
            :disabled="addForm.id"
            v-model="addForm.beginTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime" :label-width="formLabelWidth">
          <el-date-picker
            :disabled="addForm.id"
            v-model="addForm.endTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择开始时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark" :label-width="formLabelWidth">
          <el-input :disabled="addForm.id" tpye="textarea" v-model="addForm.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="审核状态" v-if="addForm.id" :label-width="formLabelWidth">
          <el-select  v-model="addForm.leaderState" >
            <el-option label="待审核" value="0"></el-option>
            <el-option label="通过" value="1"></el-option>
            <el-option label="不通过" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注" v-if="addForm.id" :label-width="formLabelWidth">
          <el-input tpye="textarea" v-model="addForm.leaderRemark" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm('addForm')">确 定</el-button>
        <el-button @click="dialogFormVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!--    <div class="table">-->
    <el-table class="content" tooltip-effect="dark" border
              :data="tableData" :header-cell-style="{'text-align':'center'}">

      <el-table-column prop="proposer.realName" label="请假人" align="center"/>
      <el-table-column prop="departmentVo.name" label="部门" min-width="102px" align="center"/>
      <el-table-column prop="reason" label="原因" align="center"/>
      <el-table-column prop="remark" label="请假备注"/>
      <el-table-column prop="beginTime" label="开始时间" min-width="105px" align="center"/>
      <el-table-column prop="endTime" label="结束时间" min-width="105px" align="center"/>
      <el-table-column label="审批状态" align="center">
        <template slot-scope="scope">
          <el-tag type="success" size="small" plain v-if="scope.row.leaderState == '1'">同意</el-tag>
          <el-tag type="info" size="small" plain v-if="scope.row.leaderState == '0'">待审核</el-tag>
          <el-tag type="danger" size="small" plain v-if="scope.row.leaderState == '2'">不同意</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="reviewer.realName" label="审批人" align="center"/>
      <el-table-column prop="leaderRemark" label="领导备注"/>

      <el-table-column
        fixed="right"
        label="操作"
        width="150px">
        <template slot-scope="scope">
          <el-button v-if="hasAuth('views.personnel.employeeLeave.leave.update') && scope.row.leaderState == '0'"
                     type="text" @click="editHandle(scope.row.id)">处理</el-button>
<!--          <el-divider v-if="hasAuth('views.personnel.employeeLeave.leave.update') && scope.row.leaderState == '0'" direction="vertical"></el-divider>-->
<!--          <template>-->
<!--            <el-popconfirm-->
<!--              title="这是一段内容确定删除吗？"-->
<!--              @confirm="deleteFactory(scope.row)"-->
<!--            >-->
<!--              <el-button slot="reference" type="text">删除</el-button>-->
<!--            </el-popconfirm>-->
<!--          </template>-->
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="total, sizes, prev, pager, next, jumper"
      style="align-content: center; align-items: center; margin-left: 15px"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :total="totalCount"
      :page-size="PageSize"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination>
  </div>
  <!--  </div>-->
</template>

<script>
import { validatePhone, isIntegerNotMust, isDecimal } from '@/utils/validator'

export default {
  name: 'employeeLeave',
  data() {
    return {
      dialogFormVisible: false,
      updateForm: false,
      //添加表单的数据
      tableData: [],
      // 默认显示第几页
      currentPage: 1,
      // 个数选择器（可修改）
      pageSizes: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
      // 总条数，根据接口获取数据长度(注意：这里不能为空)
      totalCount: 1,
      // 个数选择器（可修改）
      PageSize: 10,
      addForm: {}, //请假申请
      editForm: {}, //请假编辑
      reasonList: ['病假', '事假', '休假', '调休', '婚假', '丧假', '其它'],
      rules: {
        reason: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
        beginTime: [{ required: true, message: '请选择开始时间', trigger: 'blur' }],
        endTime: [{ required: true, message: '请选择结束时间', trigger: 'blur' }],
        remark: [{ required: true, message: '请输入备注', trigger: 'blur' }]
      },
      searchForm: {leaderState:'0'},
      formLabelWidth: '120px',
      departmentList: [] //部门
    }
  },

  mounted() {
    this.load()
    this.loadAllDepartment() //加载部门
  },

  methods: {
    editHandle(id) {
      this.axios.get('/leave/info/' + id).then(res => {
        this.addForm = res.data
        this.dialogFormVisible = true
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (!this.addForm.id) {
          this.addForm.userId = this.$store.state.user.userInfo.user.id
          this.addForm.departmentId = this.$store.state.user.userInfo.user.departmentId
        }
        if (this.addForm.id) {
          this.addForm.leaderId = this.$store.state.user.userInfo.user.id
        }
        if (valid) {
          this.axios.post('/leave/' + (this.addForm.id ? 'update' : 'add'), this.addForm).then(resp => {
            if (resp.code === 200) {
              this.$message({
                message: '操作成功',
                type: 'success',
                onClose: () => { //关闭回调
                }
              })
              this.load()
              this.dialogFormVisible = false
              this.addForm = {}
            }
          })
        }
      })
    },
    deleteFactory(row) {
      this.axios.get('/leave/delete/' + row.id).then(
        (resp) => {
          this.load()
        }
      )
    },
    handleSizeChange(val) {
      this.PageSize = val
      this.currentPage = 1
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    search() {
      if (this.hasAuth('views.personnel.employeeLeave.leave.admin.select')) {
        // param.userId = null
      } else {
        this.searchForm.userId = this.$store.state.user.userInfo.user.id
      }
      this.axios.post('/leave/select', this.searchForm).then((resp) => {
          this.tableData = resp.data
          this.totalCount = resp.data.length
        }
      )
    },

    //重置查询框
    resetSearchForm() {
      this.searchForm = {}
      this.load()
    },
    load() {
      let param = {
        leaderState: '0'
      }
      if (this.hasAuth('views.personnel.employeeLeave.leave.admin.select')) {
        // param.userId = null
      } else {
        param.userId = this.$store.state.user.userInfo.user.id
      }

      this.axios.post('/leave/select', param).then((resp) => {
          this.tableData = resp.data
          // if (resp.data != null) {
          //   this.totalCount = resp.data.length
          // }
        }
      )
    },
    loadAllDepartment() {
      this.axios.post('/department/select', {}).then(resp => {
        this.departmentList = resp.data
        console.log(this.departmentList)
      })
    },
    hasAuth(url) {
      let auth = this.$store.state.menu.authorizationList
      return auth.indexOf(url) > -1
    },
    createNewLeave(formName){
      this.addForm={}
      this.dialogFormVisible = true
    },
  }
}
</script>

<style scoped>
.table {
  border-radius: 5px;
  margin: 10px;
  background-color: #FAFAFA;
  /*text-align: center;*/
}

.content {
  -webkit-box-shadow: #666 0px 0px 10px;
  -moz-box-shadow: #666 0px 0px 10px;
  box-shadow: #666 0px 0px 10px;
  background: #EEFF99;

  /*margin-right: 15px;*/
  /*margin-left: 15px;*/
}

.el-table {
  border-radius: 5px;
  margin-right: 15px;
  margin-left: 15px;
  margin-bottom: 10px;
  width: 98%;
}
</style>
